import React, { useEffect } from "react";
import { Modal, Form, Input, message, Select, Button, DatePicker } from "antd";
import moment from "moment";
const { Option } = Select;

interface PurchaseOrderValues {
  // 仓库物品ID, 必填 @int32
  warehouse_product_id?: number;
  //  @int32
  supplier_id: number;
  //  @int32
  quantity: number;
  // 1-待交付,2-运输中,3-已送达 @int32
  delivery_progress: number;
  // 1-待付款,2-已付款 @int32
  payment_status: number;
}

interface PurchaseOrderModalProps {
  title: string;
  visible: boolean;
  onCancel: () => void;
  onOk: (values: any) => void;
  defaultValue: any;
  warehouseProductList?: any[];
  users: any[];
}

const PurchaseOrderModal: React.FC<PurchaseOrderModalProps> = ({
  title,
  visible,
  onCancel,
  onOk,
  defaultValue,
  warehouseProductList = [],
  users = [],
}) => {
  const [form] = Form.useForm<PurchaseOrderValues>();

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      onOk(values);
      form.resetFields();
    } catch (errorInfo) {
      console.log("Failed:", errorInfo);
    }
  };

  useEffect(() => {
    if (defaultValue && Object.keys(defaultValue).length > 0) {
      form.setFieldsValue({
        ...defaultValue,
      });
    } else {
      form.resetFields();
    }
  }, [defaultValue, visible]);

  return (
    <Modal
      title={title}
      visible={visible}
      onOk={handleOk}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="ok" type="primary" onClick={handleOk}>
          确定
        </Button>,
      ]}
    >
      <Form form={form}>
        <Form.Item
          label="选择仓库物品"
          name="warehouse_product_id"
          rules={[
            {
              required: !Object.keys(defaultValue).length,
              message: "请选择",
            },
          ]}
        >
          <Select placeholder="请选择">
            {warehouseProductList.map((ele) => (
              <Option key={ele.id} value={ele.id}>
                {ele.warehouse_name}-{ele.product_name}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="选择供应商"
          name="supplier_id"
          rules={[
            {
              required: true,
              message: "请选择供应商",
            },
          ]}
        >
          {/* Add a Select component for selecting suppliers */}
          <Select placeholder="请选择供应商">
            {/* Map through the 'users' array to display supplier options */}
            {users.map((user) => (
              <Option key={user.id} value={user.id}>
                {user.supplier_name}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="数量"
          name="quantity"
          rules={[
            {
              required: true,
              message: "请输入数量",
            },
          ]}
        >
          <Input type="number" placeholder="请输入数量" />
        </Form.Item>
        <Form.Item
          label="交付进度"
          name="delivery_progress"
          rules={[
            {
              required: true,
              message: "请选择交付进度",
            },
          ]}
        >
          <Select placeholder="请选择交付进度">
            <Option value={1}>待交付</Option>
            <Option value={2}>运输中</Option>
            <Option value={3}>已送达</Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="付款状态"
          name="payment_status"
          rules={[
            {
              required: true,
              message: "请选择付款状态",
            },
          ]}
        >
          <Select placeholder="请选择付款状态">
            <Option value={1}>待付款</Option>
            <Option value={2}>已付款</Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default PurchaseOrderModal;
